<template>
    <div>
        <div id="this.d3">
            <p>dog</p>
            <p>cat</p>
            <p>pig</p>
        </div>
        <div id="this.d3-enter">
            <p>dog</p>
            <p>cat</p>
            <p>pig</p>
        </div>
        <div id="this.d3-exit">
            <p>dog</p>
            <p>cat</p>
            <p>pig</p>
            <p>rat</p>
        </div>
    </div>
</template>

<script>
export default {
  methods: {
    init() {
      this.d3
        .select("#this.d3")
        .selectAll("p")
        .data(["so cute", "cute", "fat"])
        .text(function(d, i){
            if(i==2){
                this.d3.select(this).style('color','blue')
            }
            return "第" + i + "个元素" + d;
        }).append('p').text('another animal').style('color','red')

      this.d3
        .select("#this.d3-enter")
        .selectAll("p")
        .data([3, 6, 9, 12, 15])
        .text((d, i) => {
          return "update:" + d + ",index:" + i;
        })
        .enter()
        .append("p")
        .text((d, i) => {
          return "enter:" + d + ",index:" + i;
        });

      this.d3
        .select("#this.d3-exit")
        .selectAll("p")
        .data([3, 6])
        .text((d, i) => {
          return "update:" + d + ",index:" + i;
        })
        .exit()
        .text((d, i) => {
          return "exit";
        });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
#this.d3 {
  padding: 0px;
  margin: 0;
  background: white;
}
</style>